import { View, Text } from '@tarojs/components'
import { useState } from 'react'
import { useLoad } from '@tarojs/taro'
import useShakeDetection from '../../hooks/useShakeDetection'
import ParticleAnimation from '../../components/ParticleAnimation/ParticleAnimation'
import './index.scss'

export default function Index() {
  useLoad(() => {
    console.log('首页加载')
  })

  const [triggered, setTriggered] = useState(false)

  // 当检测到摇一摇时切换动画显示
  useShakeDetection(15, () => {
    setTriggered(true)
    // 2 秒后自动隐藏占位
    setTimeout(() => setTriggered(false), 2000)
  })

  return (
    <View className='index'>
      <Text className='title'>遇光 Meetori</Text>

      {triggered ? (
        <ParticleAnimation />
      ) : (
        <Text className='tip'>轻轻摇一摇，触发交互动画</Text>
      )}
    </View>
  )
}
